<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="modules/element-ui/lib/theme-chalk/index.css">
  <script src="modules/vue/dist/vue.min.js"></script>
  <script src="modules/axios/dist/axios.min.js"></script>
  <script src="modules/element-ui/lib/index.js"></script>
  <script src="modules/js-cookie/src/js.cookie.js"></script>

</head>

<body>
  <div id="app">
    <div style="text-align: right;">
      <el-button type="primary" @click="getAnswer()">
        获取答案
      </el-button>
      <el-button type="primary" @click="clearAnswer()">
        清空答案
      </el-button>
      <el-button type="success" plain>
        <el-link type="info" href="/search.html" target="_blank">搜题</el-link>
      </el-button>
    </div>

    <el-card class="box-card" v-for="(item, index) in list" :key="item.id" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span>
          <el-image :src="item.topic"></el-image>
          <div>{{ item.no + ' 、' + item.ocr }}</div>
        </span>
      </div>
      <div class="text item">
          <el-row>
            <el-col :span="24">
              <div>
                {{ 'A：' + item.a }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                {{ 'B：' + item.b }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                {{ 'C：' + item.c }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                {{ 'D：' + item.d }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div style="margin-top: 20px">
                <el-radio-group v-model="arr1[index]" size="medium" @change="save" v-if="page === 1">
                  <el-radio-button label="A" v-model="arr1[index]"></el-radio-button>
                  <el-radio-button label="B" v-model="arr1[index]"></el-radio-button>
                  <el-radio-button label="C" v-model="arr1[index]"></el-radio-button>
                  <el-radio-button label="D" v-model="arr1[index]"></el-radio-button>
                  <el-radio-button label="NO" v-model="arr1[index]"></el-radio-button>
                </el-radio-group>
                <el-radio-group v-model="arr2[index]" size="medium" @change="save" v-if="page === 2">
                  <el-radio-button label="A" v-model="arr2[index]"></el-radio-button>
                  <el-radio-button label="B" v-model="arr2[index]"></el-radio-button>
                  <el-radio-button label="C" v-model="arr2[index]"></el-radio-button>
                  <el-radio-button label="D" v-model="arr2[index]"></el-radio-button>
                  <el-radio-button label="NO" v-model="arr2[index]"></el-radio-button>
                </el-radio-group>
                <el-radio-group v-model="arr3[index]" size="medium" @change="save" v-if="page === 3">
                  <el-radio-button label="A" v-model="arr3[index]"></el-radio-button>
                  <el-radio-button label="B" v-model="arr3[index]"></el-radio-button>
                  <el-radio-button label="C" v-model="arr3[index]"></el-radio-button>
                  <el-radio-button label="D" v-model="arr3[index]"></el-radio-button>
                  <el-radio-button label="NO" v-model="arr3[index]"></el-radio-button>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
        </div>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination :current-page="page" :total="total" :page-size="limit" :page-sizes="[100]" style="padding: 30px 0; "
      layout="->, total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
      @current-change="changeCurrentPage" />

    <div>
      <el-dialog title="答案列表" :visible.sync="dialogTableVisible" :close-on-click-modal="false" :append-to-body="true"
        :lock-scroll="false" :modal-append-to-body="true">
        <el-card class="box-card" v-if="arr1">
          <div slot="header" class="clearfix">
            <span>1-100</span>
          </div>
          <div v-for="(item, index) in arr1" :key="index" class="text item">
            {{ index + 1 + '、 ' + item }}
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>101-200</span>
          </div>
          <div v-for="(item, index) in arr2" :key="index" class="text item">
            {{ index + 101 + '、 ' + item }}
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>201-300</span>
          </div>
          <div v-for="(item, index) in arr3" :key="index" class="text item">
            {{ index + 201 + '、 ' + item }}
          </div>
        </el-card>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6">
            <el-button type="primary" @click="clearAnswer()">
              清空答案
            </el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</body>


<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        arr1: [],
        arr2: [],
        arr3: [],
        list: null,
        total: 0,
        page: 1,
        limit: 100,
        dialogTableVisible: false
      }
    },
    created() {
      this.fetchData()
    },

    methods: {
      fetchData() {


        axios.get("http://localhost/question/listPage/" + this.page + "/" + this.limit).then(
          response => {
            this.list = response.data.data.pageModel.records
            this.total = response.data.data.pageModel.total
          })


        if (Cookies.get('arr1')) {
          this.arr1 = Cookies.get('arr1').split('|')
        }
        if (Cookies.get('arr2')) {
          this.arr2 = Cookies.get('arr2').split('|')
        }
        if (Cookies.get('arr3')) {
          this.arr3 = Cookies.get('arr3').split('|')
        }
      },

      changePageSize(size) {
        this.limit = size
        this.fetchData()
      },

      changeCurrentPage(page) {
        this.page = page
        this.fetchData()
      },
      save() {
        if (this.page === 1) {
          let temp = ''
          for (var i = 0, len = this.arr1.length; i < len; i++) {
            if (i === 0) {
              temp = temp + this.arr1[i]
            } else {
              temp = temp +
                '|' + this.arr1[i]
            }
          }
          Cookies.set('arr1', temp)
        } else if (this.page === 2) {
          let temp = ''
          for (var i = 0,
              len = this.arr2.length; i < len; i++) {
            if (i === 0) {
              temp = temp + this.arr2[i]
            } else {
              temp = temp + '|' +
                this.arr2[i]
            }
          }
          Cookies.set('arr2', temp)
        } else if (this.page === 3) {
          let temp = ''
          for (var i = 0,
              len = this.arr3.length; i < len; i++) {
            if (i === 0) {
              temp = temp + this.arr3[i]
            } else {
              temp = temp + '|' +
                this.arr3[i]
            }
          }
          Cookies.set('arr3', temp)
        }
      },
      clearAnswer() {
        this.arr1 = []
        this.arr2 = []
        this.arr3 = []
        Cookies.set('arr1', '')
        Cookies.set('arr2', '')
        Cookies.set('arr3', '')
      },
      getAnswer() {

        console.log(typeof (this.arr1[100]) == "undefined");

        let str1 = "";
        for (var i = 0; i < this.arr1.length; i++) {
          if (typeof (this.arr1[i]) == "undefined") {} else if (this.arr1[i] == "undefined") {} else {
            str1 += i + 1 + "\t" + this.arr1[i] + ";&nbsp;&nbsp;"
          }
          if (((i + 1) % 10) === 0) {
            str1 += "<br>"
          }
        }

        let str2 = ""
        for (var i = 0; i < this.arr2.length; i++) {
          if (typeof (this.arr2[i]) == "undefined") {} else if (this.arr2[i] == "undefined") {} else {
            str2 += i + 101 + "\t" +
              this.arr2[i] + ";&nbsp;&nbsp;"
          }
          if (((i + 1) % 10) === 0) {
            str2 += "<br>"
          }
        }

        let str3 = ""
        for (var i = 0; i < this.arr3.length; i++) {
          if (typeof (this.arr3[i]) == "undefined") {} else if (this.arr3[i] == "undefined") {} else {
            str3 += i + 201 + "\t" +
              this.arr3[i] + ";&nbsp;&nbsp;"
          }

          if (((i + 1) % 10) === 0) {
            str3 += "<br>"
          }
        }
        this.$notify({
          title: '1-100',
          message: str1,
          duration: 0,
          dangerouslyUseHTMLString: true,
          position: 'top-left'
        });


        this.$notify({
          title: '101-200',
          message: str2,
          duration: 0,
          dangerouslyUseHTMLString: true,
        });

        this.$notify({
          title: '201-300',
          message: str3,
          duration: 0,
          dangerouslyUseHTMLString: true,
          position: 'bottom-left'
        });
      }
    }
  })
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-bottom: 10px;
    width: 100%;
  }

  .el-row {
    margin-bottom: 10px;

  }
</style>

</html>